import React, { Component , useState, useEffect } from 'react'
import * as echarts from 'echarts';
import ecStat from 'echarts-stat';
import { InboxOutlined } from '@ant-design/icons';
import axios from 'axios';
import {Modal, Spin,Button,Form,Upload,Input} from 'antd';

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
};
const antbtn = {
  width: '100%',
}
export default class BasicLine extends Component {   
      constructor(props) {
        super(props);
        this.state = {
          loading: false,
          isModalOpen: false,
          ChartTitle:'',
          file: null,
          DataList:[],
          styles :{
            backgroundImage: 'url(/img/Bar.png)',
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center center',
            backgroundSize: 'cover',
            width: '100%',
            height: '100vh'
          }
        };
        this.normFile = this.normFile.bind(this);
        this.onFinish = this.onFinish.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.getExampleFile = this.getExampleFile.bind(this);
      }

      showModal = () => {
        this.setState({
          isModalOpen: true,
        });
      };
      handleOk = () => {
        this.setState({
          isModalOpen: false,
        });
      };
      handleCancel = () => {
        this.setState({
          isModalOpen: false,
        });
      };
      handleChange = (e) => {
        this.setState({
          ChartTitle: e.target.value,
        });
      }
      normFile = (e) => {
        console.log('Upload event:', e);
        const File = e.file;
        this.setState({ file: File });
      }
      onFinish = (values) => {
        this.setState({
          isModalOpen: false,
        });
        this.initChart();
      }
      getExampleFile = () => {
        window.open('./example/example-bar.xlsx')
      }
    initChart = () => {
      const { ChartTitle, DataList } = this.state;
        this.setState({ DataList: [] })
        var chartDom = document.getElementById('BasicLineChart');
        this.myChart = echarts.init(chartDom);
        echarts.registerTransform(ecStat.transform.histogram);
        fetch('./example/example-bar.xlsx')
           .then(response => response.text())
           .then(text => {
              const rows = text.split('\n'); 
              rows.forEach(row => {
                if(row.split('\t')==''){
                  return
                }
                this.setState({
                  DataList: [...this.state.DataList, row.split('\t')]
                })
              });
              var typeList = []
              this.state.DataList[0].forEach((item,index)=>{
                if(index>0){
                  typeList.push({ type: 'line' });
                }
              })
              var option = {
                title: {
                  text: ChartTitle
                },
                legend: {},
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'cross',
                    label: {
                      backgroundColor: '#6a7985'
                    }
                  }
                },
                dataset: {
                  source: DataList
                },
                toolbox: {
                  show: true,
                  feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                  }
                },
                calculable: true,
                grid: {
                  top: '12%',
                  left: '1%',
                  right: '10%',
                  containLabel: true
                },
                dataZoom: [
                  {
                    show: true,
                    start: 0,
                    end: 100
                  },
                  {
                    type: 'inside',
                    start: 0,
                    end: 100
                  },
                  {
                    show: true,
                    yAxisIndex: 0,
                    filterMode: 'empty',
                    width: 30,
                    height: '80%',
                    showDataShadow: false,
                    left: '93%'
                  }
                ],
                xAxis: { 
                  type: 'category' ,
                  boundaryGap: false,
                },
                yAxis: {},
                series: typeList
              };
              this.myChart.setOption(option);
            });
    }
    chartReseize = () => {
        this.myChart && this.myChart.resize()
    }
    componentDidMount() {
        this.initChart()
    }
    render() {

      const { isModalOpen ,loading } = this.state;
        return (
          <>
              <Button style={antbtn} onClick={() => this.showModal()} className='antbtn'>Open Modal</Button>
              <Modal title="Basic Modal" open={isModalOpen} onOk={() =>this.handleOk()} onCancel={() =>this.handleCancel()} 
              cancelButtonProps={{ style: { display: "none" } }} // 隐藏取消按钮
              okButtonProps={{ style: { display: "none" } }} // 隐藏确认按钮
              >
              <Spin spinning={loading}>  
              <Form onSubmit={this.handleSubmit}
                    name="validate_other"
                    {...formItemLayout}
                    onFinish={this.onFinish}
                    style={{
                      maxWidth: 600,
                    }}
                  >
                    <Form.Item label="Title">
                      <Input placeholder="Please Input Title" value={this.state.value} onChange={this.handleChange} />
                    </Form.Item>
                    <Form.Item label="Dragger">
                      <Form.Item name="dragger" multiple={false} valuePropName="file" getValueFromEvent={this.normFile} noStyle>
                       <Upload.Dragger name="files"  action="/upload.do" >
                          <p className="ant-upload-drag-icon">
                            <InboxOutlined />
                          </p>
                          <p className="ant-upload-text">Click or drag file to this area to upload</p>
                        </Upload.Dragger>
                        </Form.Item>
                      </Form.Item>
                      <Form.Item label="Example File">
                      <Button type="text" onClick={this.getExampleFile} danger>Example File</Button>
                      </Form.Item>
                    <Form.Item
                      wrapperCol={{
                        span: 12,
                        offset: 6,
                      }}
                    >
                      <Button type="primary" htmlType="submit" >
                        Submit
                      </Button>
                    </Form.Item>
                </Form></Spin>
              </Modal>
            <div className='w100 h100' id='BasicLineChart'></div>
            </>
        )
    }
}
